<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <tree-select
            v-model="formData[item.prop]"
            :multiple="item.multiple"
            :options="item.options"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :normailzer="item.normailzer"
            appendToBody
            @select="onTreeSelectChange"
        />
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-treeSelect',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * treeSelect选项
                     * @type Array
                     * @value []
                     */
                    options: [],
                    /**
                     * 是否多选
                     * @type Boolean
                     * @value true/false
                     */
                    multiple: true,
                    /**
                     * 数据格式规范化方法 (需要将选项数据转换成含有label value children 属性)
                     * @type Function
                     * @param node 每一个节点数据
                     */
                    normailzer: function(node) {
                        console.log(node)
                    },
                    /**
                     * placeholder提示信息
                     * @type String
                     * @value ""
                     */
                    placeholder: '请选择',
                    /**
                     * 是否可选择
                     * @type Boolean
                     * @value Boolean
                     */
                    disabled: false,
                    /**
                     * 是否可清除全部项
                     * @type Boolean
                     * @value Boolean
                     */
                    clearable: false,
                    /**
                     * 自定义按钮类名
                     * @type string
                     * @value 'red'
                     */
                    class: '',
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: ''
                }
            }
        },

        /**
         * 提交的表单项
         * @type Object
         */
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * treeSelect选择器选中变化事件
         * @param 当前选中的节点值
         */
        onTreeSelectChange(node) {
            this.dispatch('baseForm', 'onTreeSelectChange', {
                node,
                prop: this.item.prop
            })
        }
    }
}
</script>
